<script lang="ts" setup>
import { get, post, message, loadFile, formatEnum } from '@/utils'
import useTable from '@/hooks/useTable'
import useModal from '@/hooks/useModal'
import { CouponType, UseCouponType } from '@/enum/coupon'
const props = withDefaults(
  defineProps<{
    show: boolean
    id?: any[]
    type: 'checkbox' | 'radio'
  }>(),
  { type: 'checkbox' }
)
const emit = defineEmits(['update:show', 'reset', 'confirm', 'update:list'])
const { store } = useModal()
const { formatColumns } = useTable()
const list = ref<any[]>([])
const searchQuery = reactive({})
const formRef = ref()
const actionRef = ref()
const rowSelection = reactive({})
const radioDefault = () => ({
  type: 'radio',
})
const chekboxDefault = () => {
  return {
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false,
  }
}
const selectedKeys = ref(props.id || [])

const pagination = {
  showPageSize: true,
  pageSize: 10,
}

const request = (params: any, sort: any, filters: any): Promise<any> => {
  return new Promise((resolve, reject) => {
    const query = { ...params, size: params.pageSize }
    Reflect.deleteProperty(query, 'pageSize')
    get(
      {
        url: '/server-shop/sys-seller/coupon/page',
        data: query,
      },
      ({ data, code }) => {
        list.value = data.records
        resolve({
          data: data.records,
          total: data.total,
          success: code == 200,
        })
      }
    )
  })
}
const submit = done => {
  const dataList = list.value.filter(f => selectedKeys.value.some(v => v == f.id))
  emit('update:list', dataList)
  emit('confirm', selectedKeys.value)
  emit('update:show', false)
  done(true)
}
onMounted(() => {
  console.log(props.type)
  if (props.type == 'radio') {
    Object.assign(rowSelection, radioDefault())
    console.log('🚀 ~ file: Account.vue:74 ~ onMounted ~ rowSelection:', rowSelection)
  } else if (props.type == 'checkbox') {
    Object.assign(rowSelection, chekboxDefault())
  }
})
const columns = formatColumns([
  { title: '名称', dataIndex: 'name', hideInSearch: false, width: 200, ellipsis: true },
  {
    title: '优惠券金额',
    dataIndex: 'money',
    ellipsis: false,
    valueType: 'money',
    width: 200,
  },
  {
    title: '优惠券状态',
    dataIndex: 'status',
    width: 200,
    valueEnum: {
      0: {
        text: '关闭',
        status: 'Error',
      },
      1: {
        text: '开启',
        status: 'Success',
      },
    },
  },
  {
    title: '领取方式',
    dataIndex: 'type',
    hideInSearch: false,
    valueType: 'select',
    width: 200,
    valueEnum: formatEnum(CouponType),
  },

  {
    title: '剩余数量',
    dataIndex: 'lastTotal',
    width: 120,
  },
  {
    title: '优惠券使用类型',
    dataIndex: 'useType',
    valueEnum: formatEnum(UseCouponType),
    width: 200,
  },
  {
    title: '可用时间段/天数',
    dataIndex: 'time',
    width: 200,
    render: ({ record }) => h('span', null, record.day ? record.day + '天' : `${record.useStartTime} ~ ${record.useEndTime}`),
  },
  { title: '排序', dataIndex: 'sort', ellipsis: false, width: 200, sorter: true },
])
</script>
<template>
  <CModal v-model:visible="props.show" @before-ok="submit" :mask-closable="false" width="1200px" title="选择优惠券" @cancel="emit('update:show', false)">
    <ProTable
      :columns="columns"
      :request="request"
      row-key="id"
      :form-ref="ref => (formRef = ref)"
      :pagination="pagination"
      header-title=""
      column-resizable
      :scroll="{ x: 1000 }"
      :params="searchQuery"
      :bordered="{ cell: true }"
      :action-ref="ref => (actionRef = ref)"
      v-model:selectedKeys="selectedKeys"
      :row-selection="rowSelection"
    >
      <template #option-render="{ dom, reset }">
        <component :is="dom[1]" />
        <component :is="dom[0]" />
      </template>
    </ProTable>
  </CModal>
</template>
<style lang="less" scoped></style>
